<template>
  <div class="body" style="height: 1000px">
    <div class="row" style="border: red solid">
      <div class="column" style="border: black solid">
        <div class="panel" style="border: blue solid"></div>
        <div class="panel" style="border: blue solid"></div>
      </div>
      <div class="column" style="border: black solid"></div>
      <div class="column" style="border: black solid"></div>
      <div class="column" style="border: black solid"></div>
    </div>
    <div class="row" style="border: green solid"></div>
  </div>
</template>

<script>
import { onMounted } from "vue";

export default {
  name: "EchartsB",
  setup() {
    onMounted(() => {
      // 基于准备好的dom，初始化echarts实例
      // 绘制图表
    });
  },
};
</script>

<style scoped>
.body {
  display: flex;
  flex-direction: column;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  border: yellow;
}
.row {
  flex: 3;
  display: flex;
}
.row:nth-child(2) {
  flex: 1;
}
.column {
  flex: 2;
}
.column:nth-child(odd) {
  flex: 1;
}
.column:nth-child(2) {
  flex: 3;
}
.panel {
  position: relative;
  height: 3.875rem;
  padding: 0 0.1875rem 0.5rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  margin-bottom: 0.1875rem;
}
</style>
